<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" :leftIconColor="'#fff'" :titleColor="'#fff'"
      :textAlign="'center'"  title="相册" :showGoBack="false" />
      <scroll-view scroll-y class="scroll-view-content">

        <view class="album-list-page">
          <!-- 相册列表 -->
          <view class="album-list">
            <view v-for="(album, idx) in albums" :key="idx" class="album-card" @tap="onAlbumClick(album)">
              <!-- 相册封面图片 -->
              <image class="album-cover" :src="album.cover" mode="aspectFill" />

              <!-- 相册信息 -->
              <view class="album-info">
                <view class="album-title">{{ album.title }}</view>
                <view class="album-time">
                  <image class="time-icon" :src="imgUrl + 'clock@2x.png'" />
                  <text class="album-time-text">活动时间 :
                    <text class="start-date">{{ album.startDate }}</text>
                    <text class="end-date"> ~ {{ album.endDate }}</text>
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>

      </scroll-view>
      <view style="height: 200rpx"></view>
      <XlmExpressTabbar :current="3" />
    </view>
  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import XlmExpressTabbar from '@/components/XlmExpressTabbar/index.vue';
  import GroupItem from '@/components/GroupItem/index.vue'
  import ClubList from '@/components/ClubList/index.vue'
  import ScheduleList from '@/components/ScheduleList/index.vue'
  import ResultList from '@/components/ResultList/index.vue'
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }

  const albums = [
    {
      cover: imgUrl + 'a.jpg',
      title: '草源体育公开赛田径运动 · 郑州站',
      startDate: '2025.10.12',
      endDate: '2025.12.12'
    },
    {
      cover: imgUrl + 'b.jpg',
      title: '草源体育公开赛田径运动 · 郑州站',
      startDate: '2025.10.12',
      endDate: '2025.12.12'
    },
    {
      cover: imgUrl + 'c.jpg',
      title: '草源体育公开赛田径运动 · 郑州站',
      startDate: '2025.10.12',
      endDate: '2025.12.12'
    }
  ]

  function onAlbumClick(album) {
    // 跳转到相册详情页
    uni.showToast({ title: '点击了相册', icon: 'none' })
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
<style>
</style>